<template>
  <div class="home">
    <div class="top">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in defaultData" :key="index" :lg="4" :md="4" :xs="8">
          <el-card>
            <div class="top-box h-box">
              <div class="left" style="width: 40%; text-align: center">
                <div
                  style="
                    background-color: var(--el-menu-active-color);
                    border-radius:10px;
                    padding: 5px;
                    width: 30px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <span style="font-size: 26px; color: #fff" :class="`iconfont ${item.icon}`"></span>
                </div>
                <!--                <svg-->
                <!--                  t="1755776798186"-->
                <!--                  class="icon"-->
                <!--                  viewBox="0 0 1024 1024"-->
                <!--                  version="1.1"-->
                <!--                  xmlns="http://www.w3.org/2000/svg"-->
                <!--                  p-id="2496"-->
                <!--                  width="40"-->
                <!--                  height="40"-->
                <!--                >-->
                <!--                  <path-->
                <!--                    d="M212.4996875 239.66c6.39375-19.69875 27.5446875-30.485625 47.244375-24.09375 19.6996875 6.39375 30.4865625 27.545625 24.09375 47.2453125C267.50375 313.1365625 258.875 367.2640625 258.875 422.6159375c0 136.771875 82.6903125 263.240625 252.4678125 380.030625l1.1259375 0.76875 1.1259375-0.76875c168.009375-115.575 250.7353125-240.6253125 252.440625-375.759375l0.0271875-4.27125c0-33.4246875-3.1453125-66.4378125-9.268125-98.521875-3.999375-20.95875-9.2559375-41.445-15.69375-61.2825-6.39375-19.6996875 4.393125-40.8515625 24.0928125-47.244375 19.6996875-6.39375 40.8515625 4.3940625 47.244375 24.09375 7.404375 22.8159375 13.4409375 46.3396875 18.0271875 70.3734375C837.4690625 346.735625 841.0625 384.456875 841.0625 422.6159375c0 171.1875-104.338125 323.86125-308.04375 457.314375a37.5 37.5 0 0 1-41.1 0C288.213125 746.478125 183.875 593.804375 183.875 422.6159375c0-63.24375 9.875625-125.1815625 28.6246875-182.9559375z"-->
                <!--                    fill="#fff"-->
                <!--                    p-id="2497"-->
                <!--                  ></path>-->
                <!--                  <path-->
                <!--                    d="M502.1309375 139.390625a37.5 37.5 0 0 1 20.0784375-0.1659375l0.5971875 0.1659375 264.3 75.7978125c19.90875 5.709375 31.4184375 26.476875 25.7090625 46.3846875-5.6521875 19.7090625-26.0625 31.1878125-45.7875 25.875l-0.5971875-0.1659375L512.46875 214.4496875l-253.96125 72.8325c-19.7090625 5.653125-40.26-5.5725-46.209375-25.11375l-0.1753125-0.5953125c-5.653125-19.7090625 5.5725-40.26 25.11375-46.209375l0.5953125-0.1753125 264.3-75.7978125zM455.185625 574.18625l-80.6953125-81.931875c-14.5321875-14.75625-14.3521875-38.499375 0.403125-53.0325 14.6090625-14.386875 38.025-14.353125 52.59375-0.0346875l0.4378125 0.43875 80.69625 81.931875c14.5321875 14.75625 14.3521875 38.499375-0.403125 53.0325-14.6090625 14.386875-38.025 14.353125-52.59375 0.0346875l-0.43875-0.43875z"-->
                <!--                    fill="#fff"-->
                <!--                    p-id="2498"-->
                <!--                  ></path>-->
                <!--                  <path-->
                <!--                    d="M457.4215625 521.594375L600.3565625 378.996875c14.6625-14.6278125 38.405625-14.5996875 53.0325 0.0628125 14.4815625 14.5153125 14.59875 37.93125 0.373125 52.5909375l-0.4359375 0.4415625-142.9340625 142.5965625c-14.6625 14.6278125-38.405625 14.5996875-53.0334375-0.0628125-14.480625-14.5153125-14.5978125-37.93125-0.3721875-52.5909375l0.435-0.4415625z"-->
                <!--                    fill="#fff"-->
                <!--                    p-id="2499"-->
                <!--                  ></path>-->
                <!--                </svg>-->
              </div>
              <div class="right flex-extend">
                <span style="font-size: 32px; font-weight: bold;  overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;"
                  >{{ formatNumberWithWan(Number(item.value)) }}
                </span>
                <span style="font-size: 14px; color: gray">{{ item.label }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom mg-t-lg">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card>
            <ChartAttack />
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <ChartSource />
          </el-card>
          <!--          <MemChart v-if="init" :remoteData="pageData.mem"></MemChart>-->
        </el-col>
        <el-col :span="16" class="mg-t-lg">
          <el-card>
            <ChartTraffic />
          </el-card>
          <!--          <DiskChart v-if="init" :remoteData="pageData.disk"></DiskChart>-->
        </el-col>
        <el-col :span="8" class="mg-t-lg">
          <el-card>
            <ChartWarn />
          </el-card>
          <!--          <SysState v-if="init" :remoteData="pageData"></SysState>-->
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import ChartAttack from "./components/ChartAttack/index.vue";
import ChartSource from "./components/ChartSource/index.vue";
import ChartTraffic from "./components/ChartTraffic/index.vue";
import ChartWarn from "./components/ChartWarn/index.vue";
import { sysOverView, sysDistribut, getDomain } from "@/api/modules/home/index";
import {getDataByPage} from "@/api/modules/dynamic-camouflage/host-config"
import {getDataByPage as networkConfigPage} from "@/api/modules/dynamic-camouflage/network-config"
import { reactive } from "vue";
function formatNumberWithWan(number) {
  if (typeof number !== 'number') {
    return 'Invalid input'; // 或者抛出一个错误
  }

  if (number < 100000) { // 小于 10 万，直接返回
    return number.toString();
  } else {
    const wan = number / 10000;
    return wan.toFixed(0) + 'w'; // 保留一位小数
  }
}

const defaultData = reactive([
  {
    label: "虚拟节点",
    value: 0,
    icon: "icon-neiwangxuniIP"
  },
  {
    label: "虚拟网络",
    value: 0,
    icon: "icon-xuniwangluo"
  },
  {
    label: "虚拟主机",
    value: 0,
    icon: "icon-yunzhuji"
  },
  {
    label: "虚拟域名",
    value: 0,
    icon: "icon-yuming"
  },
  {
    label: "告警",
    value: 0,
    icon: "icon-event"
  },
  {
    label: "封堵",
    value: 0,
    icon: "icon-gaojingcelve"
  }
]);

async function getTopData() {
  const res1 = await sysOverView();
  const res2 = await sysDistribut();
  const res3 = await getDomain({ pageNum: 0, pageSize: 10 });
  const res4 = await getDataByPage({ pageNum: 0, pageSize: 10 });
  const res5 = await networkConfigPage({ pageNum: 0, pageSize: 10 });
  console.log(`:::1`, res1);
  console.log(`:::2`, res2);
  console.log(`:::3`, res3);
  defaultData[0].value = res1.data[0]||'0';
  defaultData[1].value = res5.result.total||'0';
  defaultData[2].value = res4.total||'0';
  defaultData[3].value = res3.result.total||'0';
  defaultData[4].value = res1.data[3];
  defaultData[5].value = res1.data[4];
  console.log(defaultData);
}

getTopData();
</script>

<style scoped lang="scss">
.top :deep(.el-card__body) {
  padding: 10px 0px !important;

  svg {
    background-color: var(--el-menu-active-color) !important;
  }

  .left {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .right {
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;

  }
}
</style>
